<template>
    <div>
        <el-menu active-text-color="#ffd04b" background-color="#3D5F81" class="el-menu-vertical-demo"
            :default-active="defaultActive" text-color="#fff" unique-opened router>
            <el-menu-item index="/home">
                <el-icon>
                    <icon-menu />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu v-for="item in store.getters.getUser.menus" :key="item.id" :index="item.id.toString()">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item v-for="menu in item.children" :index="menu.url" :key="menu.id">{{ menu.title }}
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import {
    Menu as IconMenu,
} from '@element-plus/icons-vue'
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const route = useRoute()
const store = useStore()
const defaultActive = ref('/home')

defaultActive.value = route.path
console.log(store.getters, '1111');

</script>

<style scoped>
.el-menu {
    min-height: 840px;
}
</style>
